<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap提示工具（Tooltip）</title>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">

    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

</head>
<body>
<h4>提示工具（Tooltip）插件 - 锚</h4>这是一个
<a href="#" class="tooltip-test" data-toggle="tooltip"
                                    title="默认的 Tooltip1">
    默认的 Tooltip</a>.

这是一个 <a href="#" class="tooltip-test" data-toggle="tooltip"
        data-placement="left" title="左侧的 Tooltip">
    左侧的 Tooltip</a>.
这是一个 <a href="#" data-toggle="tooltip" data-placement="top"
        title="顶部的 Tooltip">
    顶部的 Tooltip</a>.
这是一个 <a href="#" data-toggle="tooltip" data-placement="bottom"
        title="底部的 Tooltip">
    底部的 Tooltip</a>.
这是一个 <a href="#" data-toggle="tooltip" data-placement="right"
        title="右侧的 Tooltip">
    右侧的 Tooltip</a><br><h4>提示工具（Tooltip）插件 - 按钮</h4>
<button type="button" class="btn btn-default" data-toggle="tooltip"
        title="默认的 Tooltip">
    默认的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"
        data-placement="left" title="左侧的 Tooltip">
    左侧的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"
        data-placement="top" title="顶部的 Tooltip">
    顶部的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"
        data-placement="bottom" title="底部的 Tooltip">
    底部的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"
        data-placement="right" title="右侧的 Tooltip">
    右侧的 Tooltip
</button>
<script>
    $(function () {
        $("[data-toggle='tooltip']").tooltip();
    });
</script>



<div style="padding: 100px 100px 10px;">
    这是一个 <a href="#" class="tooltip-show" data-toggle="tooltip"
            title="show">Tooltip 方法 show   </a>.

    这是一个 <a href="#" class="tooltip-hide" data-toggle="tooltip"
            data-placement="left" title="hide">Tooltip 方法 hide   </a>.

    这是一个 <a href="#" class="tooltip-destroy" data-toggle="tooltip"
            data-placement="top" title="destroy">Tooltip 方法 destroy   </a>.

    这是一个 <a href="#" class="tooltip-toggle" data-toggle="tooltip"
            data-placement="bottom" title="toggle">Tooltip 方法 toggle   </a>.   <br><br><br><br><br><br>
    <p class="tooltip-options" >
        这是一个 <a href="#" data-toggle="tooltip" title="<h2>'am Header2         </h2>">Tooltip 方法 options      </a>.   </p>

    <script>
        $(function () { $('.tooltip-show').tooltip('show');});
        $(function () { $('.tooltip-hide').tooltip('hide');});
        $(function () { $('.tooltip-destroy').tooltip('destroy');});
        $(function () { $('.tooltip-toggle').tooltip('toggle');});
        $(function () { $(".tooltip-options a").tooltip({html : true });
        });
    </script><div>


    <h4>提示工具（Tooltip）插件 - 锚</h4>这是一个
    <a href="#" class="tooltip-show" data-toggle="tooltip"
                                        title="默认的 Tooltip">默认的 Tooltip</a>.
    <script>$(function () {
        $('.tooltip-show').tooltip('show');
    });
    $(function () {
        $('.tooltip-show').on('show.bs.tooltip', function () {
            alert("Alert message on show");
        })
    });</script>


</body>
</html>